<template>
	<view class="custom-text"
		:style="{background: bgColor, height: height ? (height + 'px') : undefined, 'justify-content': valign, padding: padding + 'px'}"
	>
		<u-parse :html="value" v-if="isHtml" />
		<view
			v-else
			:style="{
				width: width,
				textIndent: tIndent,
				textAlign: textAlign,
				maxHeight: maxHeight,
				lineHeight: lineHeight,
				fontSize: fSize,
				color: color,
				fontWeight: fontWeight,
				fontStyle: fontStyle,
				overflow: overflow,
				wordBreak:wordBreak
			}"
		>
			{{ value }}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'customText',
		props: {
			value: {
				type: [Number, String, Date],
				default: ''
			},
			align: {
				type: String,
				default: 'left'
			},
			valign: {
				type: String,
				default: 'center'
			},
			bgColor: {
				type: String
			},
			height: {
				type: Number,
				default: 25
			},
			textIndent: {
				type: Number,
				default: 0
			},
			fontSize: {
				type: Number,
				default: 14
			},
			padding: {
				type: Number,
				default: 2
			},
			fontColor: {
				type: String,
				default: '#383838'
			},
			fontBold: {
				type: Boolean,
				default: false
			},
			fontItalic: {
				type: Boolean,
				default: false
			},
			isHtml: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				width: '100%',
				tIndent: this.textIndent + 'em',
				textAlign: this.align,
				maxHeight: this.height ? (this.height + 'px') : undefined,
				lineHeight: 1.5,
				fSize: this.fontSize + 'px',
				color: this.fontColor,
				fontWeight: this.fontBold ? 600 : 400,
				fontStyle: this.fontItalic ? 'italic' : undefined,
				overflow: 'hidden',
				wordBreak: 'break-word'
			}
		}
	}
</script>

<style scoped>
	.custom-text {
		display: flex;
		flex-direction: column;
		padding: 4rpx;
	}
</style>